<template>
	<view>
		
 		<view class="logo">
			<image src="/static/icon/login.png" class="img"></image>
			<u-search placeholder="搜索" v-model="keyword" shape="round" :clearabled="true" :animation="true" class="search"></u-search>
		</view> 
		
    <u-swiper
            :list="list2"
            keyName="image"
            showTitle
            :autoplay="true"
            circular
			interval="2000"
			height="200"
			@click="click0()"
			radius="60rpx"
    ></u-swiper>
	<u-line 
	color="#2979ff"
	margin="20rpx"
	length="90%"
	></u-line>
		
		<!-- <view>
			<u--text text="全部标签"  size="70rpx" bold="true" align="left"></u--text>
		</view> -->
		
		<view class="u-demo-block__content">
			<u-row
			justify="space-between"
			gutter="15"
			>
			<u-col span="6">
					<u--image :showLoading="true" :src="src" width="160px" height="125px" @click="click1()" radius="40rpx" class="img2">
				  <template v-slot:loading>
				    <u-loading-icon color="red"></u-loading-icon>
				  </template>
			</u--image>
			<u--text type="primary" text="旅行" size="20" align="center"></u--text>
			</u-col>	
			<u-col>
				<u--image :showLoading="true" :src="src1" width="160px" height="125px" @click="click2()" radius="40rpx" class="img3">
				  <template v-slot:loading>
				    <u-loading-icon color="red"></u-loading-icon>
				  </template>
			</u--image>
			<view class="right">学术研究</view>
			</u-col>
			</u-row>
		</view>
			<view class="u-demo-block__content">
				<u-row
				justify="space-between"
				gutter="15"
				>
				<u-col span="6">
					<!-- <u--text type="primary" text="旅行" size="20" align="center"></u--text> -->
						<u--image :showLoading="true" :src="src2" width="160px" height="125px" @click="click3()" radius="40rpx" class="img2">
					  <template v-slot:loading>
					    <u-loading-icon color="red"></u-loading-icon>
					  </template>
				</u--image>
				 <u--text type="warning" text="社团" size="20" align="center"></u--text>
				</u-col>	
				<u-col>
					<!-- <u--text type="primary" text="学术研究" size="20" align="left"></u--text>
					 -->
					 <!-- <view class="right">学术研究</view> -->
					<u--image :showLoading="true" :src="src3" width="160px" height="125px" @click="click4()" radius="40rpx" class="img3">
					  <template v-slot:loading>
					    <u-loading-icon color="red"></u-loading-icon>
					  </template>
				</u--image>
				<view class="right1">体育运动</view>
				</u-col>
				</u-row>
			</view>
			<view class="u-demo-block__content">
				<u-row
				justify="space-between"
				gutter="15"
				>
				<u-col span="6">
						<u--image :showLoading="true" :src="src4" width="160px" height="125px" @click="click5()" radius="40rpx" class="img2">
					  <template v-slot:loading>
					    <u-loading-icon color="red"></u-loading-icon>
					  </template>
				</u--image>
				 <u--text type="success" text="喝茶" size="20" align="center"></u--text>
				</u-col>	
				<u-col>
					<u--image :showLoading="true" :src="src5" width="160px" height="125px" @click="click6()" radius="40rpx" class="img3">
					  <template v-slot:loading>
					    <u-loading-icon color="red"></u-loading-icon>
					  </template>
				</u--image>
				<view class="right2">拼车</view>
				</u-col>
				</u-row>
			</view>
	</view>
</template>

<script>
		export default {
			data() {
				return {
					keyword: '',
                 list2: [{
                                    image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic189.nipic.com%2Ffile%2F20181103%2F23352985_081841370000_2.jpg&refer=http%3A%2F%2Fpic189.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652448719&t=ac50bf79ab40e14031880acffef2122b',
                                    title: '解封之后，来一场计划已久的旅行',
                                },{
                                    image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.c1s.com%2Fd%2Ffile%2Fp%2Fpic%2F2019%2F1229%2F201912435098rbxht5ukreg.jpg&refer=http%3A%2F%2Fwww.c1s.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652449308&t=eb13d09cb96f999482829afb67ba3174',
                                    title: '阳光体育，篮球场上挥洒汗水',
                                },{
                                    image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01dc8055458be60000019ae975c338.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652450762&t=5c810343ceb24899e470f032289eac16',
                                    title: '你所思念的家乡,有怎样的风景',
                                }],
					src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c0775e6dcbfea80120a895d1069e.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652687703&t=22c1b6b0b61da1c255e55b43bd2b7521",
					src1:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.woshipm.com%2Fwp-files%2F2017%2F10%2Fjiazaidognhua.png&refer=http%3A%2F%2Fimage.woshipm.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652687824&t=4c4ca55e82c80e6e941fd3c3ba872701",
					src2:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191004%2Ffb387a5a5c8747de820e40100d197880.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652687939&t=dedb15a51136dec2e22058f56e5325e2",
					src3:"https://img1.baidu.com/it/u=1490322087,914474779&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
					src4:"https://img1.baidu.com/it/u=1834734160,1288293390&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
					src5:"https://img2.baidu.com/it/u=3696736143,2701304435&fm=253&fmt=auto&app=138&f=JPEG?w=311&h=500",
				}
			},
			methods:{
					click0(){
						
					},
					click1(){
						this.$router.push('')
					},
					click2(){
						this.$router.push('')
					},
					click3(){
						this.$router.push('')
					},
					click4(){
						this.$router.push('')
					},
					click5(){
						this.$router.push('')
					},
					click6(){
						this.$router.push('')
					},
			}
		}


</script>

<style>
	page {
		background-color: rgb(234,239,255)
	}
	.logo{
		display: flex;
	}
	.img{
		width: 150rpx;
		height: 125rpx;
	}
	.img2{
		margin-left: 40rpx;
		margin-top: 10rpx;
	}
	.img3{
		margin-right: 40rpx;
		margin-top: 15rpx;
	}
	.img4{
		margin-left: 40rpx;
		margin-top: 15rpx;
	}
	.search{
		height: 150rpx;
	}
	.text{
		font-size: 50rpx;
	}
	.right{
		font-size: 40rpx;
		color: #2979FF;
		margin-left: 80rpx;
	}
	.right1{
		font-size: 40rpx;
		color: #F0AD4E;
		margin-left:80rpx
	}
	.right2{
		font-size: 40rpx;
		color: #4CD964;
		margin-left: 120rpx;
	}
</style>